"use client";
import React from 'react';
import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table';
import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css';
const Technical = () => {
    return (
        <div className="max-w-7xl mx-auto">
                <Table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border">
                    <Thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <Tr>
                        <Th scope="col" className="px-6 py-3 border">语言名称</Th>
                        <Th scope="col" className="px-6 py-3 border">框架名称</Th>
                        <Th scope="col" className="px-6 py-3 border">熟练程度</Th>
                        <Th scope="col" className="px-6 py-3 border">相关经验</Th>
                        <Th scope="col" className="px-6 py-3 border">备注</Th>
                    </Tr>
                    </Thead>
                    <Tbody>
                    <Tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                        <Td rowSpan={3} className="px-6 py-3 border">PHP</Td>
                        <Td className="px-6 py-3 border">Laravel</Td>
                        <Td className="px-6 py-3 border">很熟练</Td>
                        <Td className="px-6 py-3 border">创建过API和网站后台</Td>
                        <Td className="px-6 py-3 border">后台编写框架用的是laravel-admin,目前比较喜欢用filamentphp</Td>
                    </Tr>
                    <Tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                        <Td className="px-6 py-3 border">Wordpress</Td>
                        <Td className="px-6 py-3 border">很熟练</Td>
                        <Td className="px-6 py-3 border">开发过插件和网站主题, 快速开发API及改装做项目后台</Td>
                        <Td className="px-6 py-3 border">企业官网主题和API发布自动发布文章的插件</Td>
                    </Tr>
                    <Tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                        <Td className="px-6 py-3 border">Thinkphp</Td>
                        <Td className="px-6 py-3 border">熟练</Td>
                        <Td className="px-6 py-3 border">进行过二次开发(niushop)</Td>
                        <Td className="px-6 py-3 border">基本上可以进行开发，但不是很熟练，也不太喜欢</Td>
                    </Tr>

                    <Tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                        <Td rowSpan={2} className="border text-center">Javascript</Td>
                        <Td className="px-6 py-3 border">Uniapp(VueJS)</Td>
                        <Td className="px-6 py-3 border">比较熟练</Td>
                        <Td className="px-6 py-3 border">配合wordpress REST API开发过视频APP</Td>
                        <Td className="px-6 py-3 border">vuejs是uniapp官方的编写框架</Td>
                    </Tr>
                    <Tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                        <Td className="px-6 py-3 border">ReactJS(NextJS)</Td>
                        <Td className="px-6 py-3 border">熟练</Td>
                        <Td className="px-6 py-3 border">开发过WEB3游戏官网及互联网产品官网</Td>
                        <Td className="px-6 py-3 border">NextJS可以写nodejs后端，也可以引入API进行SSR，前端用的是reactjs</Td>
                    </Tr>


                    <Tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                        <Td rowSpan={2} className="px-6 py-3 border">CSS</Td>
                        <Td className="px-6 py-3 border">Tailwindcss</Td>
                        <Td className="px-6 py-3 border">比较熟练</Td>
                        <Td className="px-6 py-3 border">配合Laravel框架进行全栈开发</Td>
                        <Td className="px-6 py-3 border">目前很多框架的官方推荐的前端样式框架</Td>
                    </Tr>
                    <Tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                        <Td className="px-6 py-3 border">Bootstrap</Td>
                        <Td className="px-6 py-3 border">比较熟练</Td>
                        <Td className="px-6 py-3 border">配合其他框架进行前端开发的使用用到的</Td>
                        <Td className="px-6 py-3 border">早期喜欢用这个，但是后来tailwindcss起来后用这个框架</Td>
                    </Tr>

                    <Tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
                        <Td className="px-6 py-3 border">Python</Td>
                        <Td className="px-6 py-3 border">Beautiful Soup等</Td>
                        <Td className="px-6 py-3 border">可以边查边写</Td>
                        <Td className="px-6 py-3 border">写过爬虫, 桌面应用程序</Td>
                        <Td className="px-6 py-3 border">基本上能应付某些需求</Td>
                    </Tr>
                    </Tbody>
                </Table>
        </div>
    );
};

export default Technical;